<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TextViewer</title>

    <!-- Bootstrap 5 CSS -->
    <link th:href="@{/static/bootstrap/5.3.2/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/static/bootstrap/5.3.2/css/bootstrap-icons.min.css}">

    <style>
        #logEditor { height: calc(100vh - 150px); border-left: 1px solid #ddd; }
        .timestamp { color: #008800; font-weight: bold; }
        .log-info { color: #0000FF; }
        .log-error { color: #FF0000; font-weight: bold; }
        .log-warn { color: #FFA500; }
        .log-debug { color: #888888; }
        .className { color: #660e7a; }
        .stacktrace { color: #666; }
        .number { color: #0000cc; }
        .highlight { background: #ff0; }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
        <span class="navbar-brand">TextViewer</span>
        <div class="d-flex">
            <div class="form-check form-switch text-light me-3">
                (c) Powered by Moshow ( <a href="https://zhengkai.blog.csdn.net/">CSDN</a> | <a href="https://github.com/moshowgame/">GITHUB</a> )
            </div>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row mt-3">
        <!-- 主编辑器区域 -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <p id="fileName"></p>
                </div>
                <div class="card-body p-0">
                    <div id="logEditor"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 脚本依赖 -->
<script th:src="@{/static/jquery/3.7.1/jquery.min.js}"></script>
<script th:src="@{/static/bootstrap/5.3.2/js/bootstrap.bundle.min.js}"></script>
<!-- Ace JS -->
<script th:src="@{/static/ace/1.37.2/ace.min.js}"></script>
<script th:src="@{/static/ace/1.37.2/ext-themelist.min.js}"></script>
<script th:src="@{/static/ace/1.37.2/mode-logtalk.min.js}"></script>

<script th:inline="javascript">

    // 加载文件列表
    $(function() {
        const listUrl = /*[[ @{/list} ]]*/ '';
        const readUrl = /*[[ @{/read} ]]*/ '';
        const downloadUrl = /*[[ @{/download} ]]*/ '';
        const filePath = /*[[${filePath}]]*/ '';
        const parentPath = filePath.substring(0, filePath.lastIndexOf('\\'));
        const fileNameStr = filePath.substring(filePath.lastIndexOf('\\')+1,filePath.length);
        console.log(parentPath);

        $('#fileName').text(filePath);
        let editor = ace.edit("logEditor");
        // editor.setTheme("ace/theme/idea");
        editor.session.setMode("ace/mode/logtalk");
        editor.setReadOnly(true);
        editor.setOption("wrapBehavioursEnabled", true);
        editor.setOption("wrapMode", true);
        editor.setOption("scrollPastEnd", 0.1);

        // 调用 /read 接口读取文件内容
        $.ajax({
            url: readUrl,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ filePath: filePath }),
            success: function(logContent) {
                editor.setValue(logContent.data);
                editor.scrollToLine(0);
            },
            error: function(error) {
                console.error('Error reading file:', error);
                editor.setValue("ERROR ************** "+error.responseJSON.msg);
            }
        });

        // 搜索功能
        $('#searchInput').on('input', function() {
            const query = $(this).val();
            if (query) {
                editor.find(query, {
                    backwards: false,
                    wrap: false,
                    caseSensitive: false,
                    wholeWord: false,
                    regExp: false,
                    highlightAll: true
                });
            } else {
                editor.clearSelection();
            }
        });

    });
</script>
</body>
</html>